<!--
 * @Description: 
 * @Version: 2.0
 * @Date: 2024-05-07 10:30:27
 * @LastEditTime: 2024-05-07 10:31:58
-->
<template>
  <div>
    <div v-html="renderedMarkdown"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, computed } from "vue";
import hljs from "highlight.js";
import { MarkdownIt } from "markdown-it";

export default defineComponent({
  setup() {
    const markdownText = ref("");

    // 使用 MarkdownIt 渲染 Markdown
    const md = new MarkdownIt();

    // 使用 highlight.js 进行代码高亮
    const highlight = (str: string, lang: string) => {
      if (lang && hljs.getLanguage(lang)) {
        try {
          return hljs.highlight(lang, str).value;
        } catch (__) {}
      }
      return "";
    };
    md.set({ highlight });

    // 在组件挂载后渲染 Markdown
    onMounted(() => {
      markdownText.value =
        '```javascript\nfunction greet() {\n  console.log("Hello!");\n}\n```';
    });

    const renderedMarkdown = computed(() => {
      return md.render(markdownText.value);
    });

    return {
      renderedMarkdown,
    };
  },
});
</script>

<style>
/* 这里添加样式 */
</style>
